@extends('layouts.base')


@section('content')

    <div id="carousel-example-generic" class="carousel slide text-center" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach($quotes as $key => $quote)
                <li data-target="#carousel-example-generic" data-slide-to="{{$key}}"
                    class="{{$key == 0 ?'active':''}}"></li>
            @endforeach
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            @foreach($quotes as $key => $quote)
                <div class="item {{$key === 0 ? 'active':''}}">
                    <img src="{{$quote->quote_url}}" alt="{{$quote->description}}">
                    <div class="carousel-caption">
                        {{$quote->description}}
                    </div>
                </div>
            @endforeach

        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>




@endsection

@section('scripts')

@endsection